<template>
    <div class="slds-var-m-vertical_small">
        <span class="slds-text-color_destructive">
            {friendlyMessage}.
            <template lwc:if={errorMessages.length}>
                <a onclick={handleShowDetailsClick}> Show details.</a>
            </template>
        </span>
        <template lwc:if={errorMessages.length}>
            <template lwc:if={viewDetails}>
                <template for:each={errorMessages} for:item="message">
                    <p class="slds-text-body_regular" key={message}>
                        {message}
                    </p>
                </template>
            </template>
        </template>
    </div>
</template>
